<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{../../lib/element-ui/lib/theme-chalk/index.css}"/>
    <link rel="stylesheet" th:href="@{../../lib/font/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{../../css/goods.css}"/>
    <link rel="stylesheet" th:href="@{../../css/public.css}"/>
</head>
<body>
<div id="app">
    <!-- header -->
    <el-menu mode="horizontal" :default-active="activeIndex">
        <el-menu-item index="0" id="logo">Spring Boot入门</el-menu-item>
        <el-menu-item index="1"><a href="/index">首页</a></el-menu-item>
        <el-menu-item index="2"><a href="/goods">商品列表</a></el-menu-item>
        <el-menu-item id="author" index="3">
            <img class="el-tooltip" src="http://tycoding.cn/author/avatar.png"/>
            <el-dropdown>
                <span class="el-dropdown-link">TyCoding<i class="el-icon-arrow-down el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>首页</el-dropdown-item>
                    <el-dropdown-item><a href="https://github.com/TyCoding" target="_blank">GitHub</a>
                    </el-dropdown-item>
                    <el-dropdown-item><a href="http://tycoding.cn/" target="_blank">Blog</a></el-dropdown-item>
                    <el-dropdown-item divided><a href="/logout">退出</a></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-menu-item>
    </el-menu>

    <div id="main">
        <el-col>
            <el-card shadow="hover">
                <!-- 搜索框 -->
                <el-form :inline="true" :model="searchEntity" class="demo-form-inline">
                    <el-form-item label="品牌">
                        <el-input v-model="searchEntity.brand" placeholder="品牌"></el-input>
                    </el-form-item>
                    <el-form-item label="标题">
                        <el-input v-model="searchEntity.title" placeholder="标题"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                                type="primary"
                                icon="el-icon-search"
                                @click="reloadList">查询
                        </el-button>
                        <el-button
                                icon="el-icon-delete"
                                @click="searchEntity={}"
                                type="primary" plain>清空
                        </el-button>
                    </el-form-item>
                </el-form>
                <!-- 功能按钮 -->
                <div>
                    <el-row>
                        <el-button @click="saveBtn" type="primary" icon="el-icon-plus">新增</el-button>
                        <el-button type="primary" plain icon="el-icon-edit" @click="editSelect">编辑</el-button>
                        <el-button type="danger" plain icon="el-icon-delete" @click="deleteSelect(multipleSelection)">删除
                        </el-button>
                        <el-button icon="el-icon-refresh"
                                   @click="search(pageConf.pageCode,pageConf.pageSize)">刷新
                        </el-button>
                    </el-row>
                    <span class="el-tag avue-tip">
                    <i class="el-icon-info"></i>
                    <span class="name">
                        当前表格已选择
                        <span class="count">{{count}}</span>
                        项
                    </span>
                    <span @click.prevent="clearSelect()" style="cursor:pointer">&nbsp;&nbsp;清空</span>
                </span>
                </div>
                <!-- 列表 -->
                <el-table
                        ref="goods"
                        :data="goods"
                        border
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="selectChange">
                    <el-table-column
                            ref="selection"
                            align="center"
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            align="center"
                            sortable
                            fixed
                            label="商品ID"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="price"
                            sortable
                            label="商品价格"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="brand"
                            label="商品品牌"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="title"
                            sortable
                            label="商品标题"
                            width="260"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column align="center" label="商品图片" width="240">
                        <template scope="scope">
                            <img :src="scope.row.image" class="image" width="150" height="160"/>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.row.id)">删除
                            </el-button>
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.row.id)">编辑
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="primary" plain>权限
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageConf.pageCode"
                            :page-sizes="pageConf.pageOption"
                            :page-size="pageConf.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageConf.totalPage">
                    </el-pagination>
                </div>
                <br/>
                <br/>
            </el-card>
        </el-col>
    </div>

    <!-- footer -->
    <div class="footer">
        <el-container>
            <el-footer>
                <el-row :gutter="20">
                    <el-col :span="8" :offset="10">
                        <div class="footer-inner">
                            <div class="copyright">&copy; 2017 &mdash; <span itemprop="copyrightYear">2018</span>
                                <span class="with-love">
                                    <i class="fa fa-heartbeat"></i>
                                </span>
                                <span class="author" itemprop="copyrightHolder">TyCoding</span>
                            </div>
                            <label>优雅的入门Spring Boot框架，实现简单的CRUD。页面使用Vue和ElementUI制作</label>
                        </div>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>


    <!-- 新增按钮的dialog -->
    <el-dialog title="添加信息" :visible.sync="showSave" width="30%" :close-on-click-modal="false"
               :close-on-press-escape="false">
        <el-form class="editor-form" :model="editor" status-icon ref="editor"
                 label-width="100px">
            <el-form-item prop="title" label="商品标题" class="is-required"
                          :rules="[{ required: true, message: '商品标题不能为空'}]">
                <el-input v-model="editor.title" placeholder="商品标题"
                          auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item prop="price" label="商品价格" class="is-required"
                          :rules="[{ required: true, message: '商家价格不能为空'},{ type: 'number', message: '商品价格必须是数字'}]">
                <el-input v-model.number="editor.price" placeholder="商品价格"
                          auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item prop="picture" label="图片">
                <el-upload
                        ref="upload"
                        action="/upload"
                        multiple
                        name="picture"
                        list-type="picture-card"
                        :limit="1"
                        :on-exceed="onExceed"
                        :file-list="fileList"
                        :before-upload="beforeUpload"
                        :on-preview="handlePreview"
                        :on-success="handleSuccess"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item prop="brand" label="商品品牌" class="is-required"
                          :rules="[{ required: true, message: '商品品牌不能为空'}]">
                <el-input v-model="editor.brand" placeholder="商品品牌"
                          auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showSave = false">取 消</el-button>
            <el-button type="primary" @click="save('editor')">新增</el-button>
        </div>
    </el-dialog>

    <!-- 编辑按钮的dialog -->
    <el-dialog title="编辑信息" :visible.sync="showEditor" width="30%" :close-on-click-modal="false"
               :close-on-press-escape="false">
        <el-form class="editor-form" :model="editor" status-icon ref="editor"
                 label-width="100px">
            <el-form-item prop="title" label="商品标题" class="is-required"
                          :rules="[{ required: true, message: '商品标题不能为空'}]">
                <el-input v-model="editor.title" placeholder="商品标题"
                          auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item prop="price" label="商品价格" class="is-required"
                          :rules="[{ required: true, message: '商家价格不能为空'},{ type: 'number', message: '商品价格必须是数字'}]">
                <el-input v-model.number="editor.price" placeholder="商品价格"
                          auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item prop="picture" label="图片">
                <el-upload
                        ref="upload"
                        action="/upload"
                        multiple
                        name="picture"
                        list-type="picture-card"
                        :limit="1"
                        :on-exceed="onExceed"
                        :file-list="fileList"
                        :before-upload="beforeUpload"
                        :on-preview="handlePreview"
                        :on-success="handleSuccess"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item prop="brand" label="商品品牌" class="is-required"
                          :rules="[{ required: true, message: '商品品牌不能为空'}]">
                <el-input v-model="editor.brand" placeholder="商品品牌"
                          auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="showEditor = false">取 消</el-button>
            <el-button type="primary" @click="sureEdit('editor')">修改</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script type="text/javascript" th:src="@{../../lib/vue/vue.js}"></script>
<script type="text/javascript" th:src="@{../../lib/element-ui/lib/index.js}"></script>
<script type="text/javascript" th:src="@{../../lib/vue/vue-resource.js}"></script>
<script type="text/javascript" th:src="@{../../lib/vue/vuex.min.js}"></script>
<script type="text/javascript" th:src="@{../../js/goods.js}"></script>
</html>